<!-- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
ABOUT THIS NODE.JS EXAMPLE: This example works with the AWS SDK for JavaScript version 3 (v3),
which is available at https://github.com/aws/aws-sdk-js-v3.

Purpose:
index.html is the front-end HTML code for a tutorial demonstrating how to stream speech using Amazon Transcribe.
*/
-->

<!-- snippet-start:[transcribe.HTML.streaming.indexv3] -->
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Streaming Speech to Text</title>
    <link rel="stylesheet" type="text/css" href="./style.css" />
  </head>

  <body>
    <div id="mainContainer">
      <h1>Streaming Speech to Text</h1>
      <select id="inputLanguageList">
        <option value="nan">Select the language you are going to speak</option>
        <option value="zh-CN">Chinese (simplified)</option>
        <option value="en-AU">English (Australian)</option>
        <option value="en-GB">English (British)</option>
        <option value="en-US">English (US)</option>
        <option value="fr-FR">French</option>
        <option value="fr-CA">French (Canadian)</option>
        <option value="de-DE">German</option>
        <option value="it-IT">Italian</option>
        <option value="ja-JP">Japanese</option>
        <option value="ko-KR">Korean</option>
        <option value="pt-BR">Portugese (Brazilian)</option>
        <option value="es-US">Spanish (US)</option>
      </select>

      <div id="recordButtonContainer">
        <button id="record" class="recordInactive" onclick="onRecordPress()">
          ◉
        </button>
      </div>

      <div id="outputSection">
        <div id="headerText"><h2>Transcription</h2></div>
        <div id="transcribedText"></div>
        <div id="controlContainer">
          <select id="translationLanguageList" style="padding: 10px">
            <option value="nan">Select translation language</option>
            <option value="af">Afrikaans</option>
            <option value="sq">Albanian</option>
            <option value="am">Amharic</option>
            <option value="ar">Arabic</option>
            <option value="hy">Armenian</option>
            <option value="az">Azerbaijani</option>
            <option value="bn">Bengali</option>
            <option value="bs">Bosnian</option>
            <option value="bg">Bulgarian</option>
            <option value="ca">Catalan</option>
            <option value="zh">Chinese (Simplified)</option>
            <option value="zh-TW">Chinese (Traditional)</option>
            <option value="hr">Croatian</option>
            <option value="cs">Czech</option>
            <option value="da">Danish</option>
            <option value="fa-AF">Dari</option>
            <option value="nl">Dutch</option>
            <option value="en">English</option>
            <option value="et">Estonian</option>
            <option value="fa">Farsi (Persian)</option>
            <option value="tl">Filipino, Tagalog</option>
            <option value="fi">Finnish</option>
            <option value="fr">French</option>
            <option value="fr-CA">French (Canada)</option>
            <option value="ka">Georgian</option>
            <option value="de">German</option>
            <option value="el">Greek</option>
            <option value="gu">Gujarati</option>
            <option value="ht">Haitian Creole</option>
            <option value="ha">Hausa</option>
            <option value="he">Hebrew</option>
            <option value="hi">Hindi</option>
            <option value="hu">Hungarian</option>
            <option value="is">Icelandic</option>
            <option value="id">Indonesian</option>
            <option value="ga">Irish</option>
            <option value="it">Italian</option>
            <option value="ja">Japanese</option>
            <option value="kn">Kannada</option>
            <option value="kk">Kazakh</option>
            <option value="ko">Korean</option>
            <option value="lv">Latvian</option>
            <option value="lt">Lithuanian</option>
            <option value="mk">Macedonian</option>
            <option value="ms">Malay</option>
            <option value="ml">Malayalam</option>
            <option value="mt">Maltese</option>
            <option value="mr">Marathi</option>
            <option value="mn">Mongolian</option>
            <option value="no">Norwegian (Bokmål)</option>
            <option value="ps">Pashto</option>
            <option value="pl">Polish</option>
            <option value="pt">Portuguese (Brazil)</option>
            <option value="pt-PT">Portuguese (Portugal)</option>
            <option value="pa">Punjabi</option>
            <option value="ro">Romanian</option>
            <option value="ru">Russian</option>
            <option value="sr">Serbian</option>
            <option value="si">Sinhala</option>
            <option value="sk">Slovak</option>
            <option value="sl">Slovenian</option>
            <option value="so">Somali</option>
            <option value="es">Spanish</option>
            <option value="es-MX">Spanish (Mexico)</option>
            <option value="sw">Swahili</option>
            <option value="sv">Swedish</option>
            <option value="ta">Tamil</option>
            <option value="te">Telugu</option>
            <option value="th">Thai</option>
            <option value="tr">Turkish</option>
            <option value="uk">Ukrainian</option>
            <option value="ur">Urdu</option>
            <option value="uz">Uzbek</option>
            <option value="vi">Vietnamese</option>
            <option value="cy">Welsh</option>
          </select>
          <button class="button" onclick="translateText()">Translate</button>
          <button class="button" onclick="clearTranscription()">Clear</button>
        </div>
        <div id="headerText"><h2>Translation</h2></div>
        <div id="translatedText"></div>
        <div id="controlContainer">
          <input
            type="email"
            id="email"
            name="email"
            placeholder="Enter email"
          />
          <button class="button" onclick="sendEmail()">Send email</button>
        </div>
        <p>
          <b>* </b>The email address must be registered with Amazon Simple Email
          Service (Amazon SES).
        </p>
      </div>
    </div>
    <script type="text/javascript" src="./index.bundle.js"></script>
  </body>
</html>
<!-- snippet-end:[transcribe.HTML.streaming.indexv3] -->
